<template>
  <div>
    <button @click="currentpage++">第{{currentpage}}页</button>
    <ul>
      <li v-for="item in schoollist" :key="item.id">{{item.school_name}}</li>
    </ul>
  </div>
</template>
<script>
//计算属性和watch 的区别
// 01: 计算属性有缓存,watch 没有缓存
// 02: 计算属性必有有返回值, 而watch 没有返回值
// 03: 计算属性初始化就触发, 默认深度监听. 而watch默认初始化不监听, 默认不深度监听,需要配置
// 04: watch 一般用于监听开销比较大的异步操作, 而computed, 轻量级获取一个新值

import axios from "axios";
export default {
  data() {
    return {
      currentpage: 1
      // schoollist: []
    };
  },
  computed: {
    async schoollist() {
      console.log("计算属性");
      //   let list = [];
      let res = await axios.get(
        "https://api.i-lynn.cn/college?page=" + this.currentpage
      );
      console.log(res.data.data.list1);
      return res.data.data.list1;
      // 返回请求的数据
    }
  },
  mounted() {
    console.log(this.schoollist);
  }

  //   watch: {
  //     currentpage: {
  //       handler(newvalue) {
  //         axios
  //           .get("https://api.i-lynn.cn/college?page=" + newvalue)
  //           .then(res => {
  //             this.schoollist = res.data.data.list1;
  //           });
  //       },
  //       immediate: true
  //     }
  //   }
};
</script>
<style scoped>
</style>